<script setup lang="ts">
defineOptions({ name: 'ItemOneItem' })
defineProps<{
  img: string
  title: string
  value: string | number
}>()
</script>

<template>
  <div class="item-one-item flex items-center p-3">
    <div class="item-icon h-18 w-23 flex flex-shrink-0 items-center justify-center">
      <img :src="img" class="h-9 w-9">
    </div>
    <div class="flex flex-auto flex-col font-pmzd">
      <div class="item-title mt-3 whitespace-nowrap text-[#C0E7FF] opacity-80">
        {{ title }}
      </div>
      <div class="mt-2 text-[#18DEF5]">
        {{ Number.isFinite(value) ? value.toLocaleString() : '-' }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.item-icon {
  background: url('./item-one-icon-bg.png') no-repeat;
  background-size: cover;
}
.item-title {
  padding: 2px 4px;
  background: linear-gradient(90deg, #2E89FA 0%, rgba(46,137,250,0) 100%);
  border-radius: 2px;
}
</style>
